<!--
 * @Descripttion: 
 * @version: 
 * @Author: ybac
 * @Date: 2022-11-07 14:47:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-03 09:37:38
-->
<template>
  <a-drawer placement="right" width="500" :visible="showFilter" @close="closeFilter">
    <div class="filter-body">
      <div slot="title" class="uni-card filter-tit">
        筛选 <span class="filter-num">{{ filteredNums }}</span>
      </div>
      <div class="uni-card" v-if="filteredNums > 0" style="background: #fff">
        <div v-for="(item, i) in filteredList" :key="i" v-show="item.text" class="tag-wrap">
          <span class="filter-tag" @click="delFiltered(item.key)">
            <span class="tag-text">{{ `${item.title}：${item.text}` }}</span>
            <a-icon type="close" style="float: right" />
          </span>
        </div>
      </div>
      <div style="overflow-y: scroll; flex: 1; padding: 0">
        <div class="uni-card" style="background: #fff">
          <a-form-model ref="ruleForm" layout="vertical" :model="form">
            <a-form-model-item label="部门名称">
              <a-input v-model="form.departmentName" placeholder="请输入" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
      <div class="footer-submit">
        <a-button class="margin-btn" @click="resetFilter">重置</a-button>
        <a-button type="primary" @click="handleFilter">确定</a-button>
      </div>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'searchModal',
  props: {},
  data() {
    return {
      filteredFormLable: {
        departmentName: '部门名称',
      },
      showFilter: false,
      form: {},
    }
  },
  computed: {
    filteredNums() {
      let nums = 0
      for (let key in this.form) {
        if (this.form[key]) {
          nums += 1
        }
      }
      return nums
    },
    filteredList() {
      let list = []
      for (let key in this.form) {
        list.push({
          title: this.filteredFormLable[key],
          text: this.form[key],
          key,
        })
      }
      console.log(list);
      return list
    },
  },
  methods: {
    resetFilter() {
      this.form = {}
    },
    handleFilter() {
      this.closeFilter()
      this.$emit('handleFilter', this.form)
    },
    delFiltered(key) {
      this.form[key] = ''
    },
    /* 打开筛选 */
    openFilter(form) {
      this.form = JSON.parse(JSON.stringify(form))
      this.showFilter = true
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/public.less';
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .filter-tit {
    background: #fff;
    border-bottom: 1px solid @greyBorder;
    font-size: @fontSize4;
  }
  .tag-wrap:nth-of-type(n + 2) {
    margin-top: 10px;
  }
  .filter-tag {
    display: inline-block;
    position: relative;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: @fontSize1;
    line-height: @fontSize1;
    max-width: 100%;
    background: @greyBg;
    color: @titFont;
    cursor: pointer;
    .tag-text {
      display: inline-block;
      padding-right: 20px;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .anticon-close {
      position: absolute;
      right: 8px;
      top: 8px;
    }
  }
  .margin-btn {
    margin-right: @distance5;
  }
  .uni-card {
    padding: 24px;
  }
}
</style>